<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            
            height: 100%;
            
        }
        .head{
           width: 100%;
           height: 50px;
           /* margin:0 auto; */
            overflow: hidden;
            /* margin-top: 80px; */
            border-bottom: 1px solid rgb(0, 0, 0);
        }
        .foot{
            margin-top: 100px;
            background-color: rgb(43, 43, 43);
            /* position: fixed; */
            top: 0;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
            /* margin-top: 18px; */  
        }
        nav ul{
            overflow: hidden;
        }
        nav li{
            list-style: none;
            float: left;
           padding-left:10px ;
           padding-right: 7px;
           line-height: 30px;
        }
   a{
    text-decoration: none;
   }
        /* nav ul a:hover{
           background-color: red;
       } */
       .head-top a{
        color: rgb(10, 10, 10);
           font-size: 15px;
           line-height: 50px;
           font-weight: 600;
           text-decoration:underline;
       }
       .tx a{
           
           color: rgb(230, 223, 223);
           font-size: 20px;
           line-height: 50px;
       }
       .red{
        background-color: red;
        height: 100%;
       /* width: 72px; */
        position: absolute;
        left: 0;
        top: 0;
        }
        .active{
            background-color: red;
        /* width: 60px; */
        height: 50px;
        /* position: absolute;
        left: 0;
        top: 0; */
        }
       .bg{
           height: 900px;
           width: 1000px;
           margin: 0 auto;
           background-color: pink;
       }
       .w{
        width: 1000px;
           margin: 0 auto;
       }
       .tx{
           display: flex;
           justify-content: space-between;
           position: relative;
       }
       .tx li{
          /* text-align: center; */
           position: relative;
           /* margin-left: 10px; */
           padding: 0 10px;
           
       }
       .cbl{
           width: 50px;
           height:400px;
           /* background-color: red; */
           position: fixed;
           bottom: 110px;
          left: 50%;
          margin-left: calc(984px / 2 + 20px);
           
       }
       .right-l{
        transform: translateY(48px);
           transition: all 0.3s linear;
       }
       .cbl div{
           width: 50px;
           height: 50px;
           margin-bottom: 10px;
           /* background-color: rgb(182, 200, 240); */
           /* border: 1px solid pink; */
            /* margin: 100px auto; */
            float: left;
            /* margin: 10px; */
            overflow: hidden;
            /* color: #000;
            font-size: 10px; */
            position: relative;
            
       }
       .cbl div:nth-child(1){
        background-image: url(./b.png) ;
            background-size: contain;
       }
       .cbl div:nth-child(2){
        background-image: url(./c.png) ;
            background-size: contain;
       }
       .cbl div:nth-child(3){
        background-image: url(./d.png) ;
            background-size: contain;
       }
       .cbl div:nth-child(4){
        background-image: url(./e.png) ;
            background-size: contain;
       }
       .cbl div:nth-child(5){
        background-image: url(./f.png) ;
            background-size: contain;
       }
       .cbl div:nth-child(6){
        background-image: url(./g.png) ;
            background-size: contain;
       }
       .cbl div:nth-child(7){
        background-image: url(./h.png) ;
            background-size: contain;
       }
       
       .cbl .chy::before{
        content: " 辟谣";
            display: block;
            width: 100%;
            height: 100%;
            color: #fff;
            text-align: center;
            line-height: 100px;
            background-color: rgb(13, 55, 146);
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all 0.3s;
            
            
       }
       .cbl .chy:hover::before{
            /* transform-origin: top right; */
            transform: rotate(0deg);
        }
        main {
            width: 654px;

            margin: 0 auto;
            position: relative;
            top: -30px;
        }
        main img {
            width: 164px;
            height: 58px;
            left: -195px;
            top: 53px;
            position: absolute;

        }
        main input {
            box-sizing: border-box;
            outline: none;
        }

        [type="text"] {
            width: 546px;
            height: 44px;
            border: 2px solid #c4c7ce;
            padding: 12px 48px 12px 16px;
            /* border-radius: 10px 0 0 10px; */
            border-right: none;
        }

        [type="submit"] {
            width: 108px;
            height: 44px;
            /* 垂直对齐方式 middle:中间对齐 top:顶部对齐  bottom:底部对齐 */
            vertical-align: middle;
            border: none;
            background-color: #4e6ef2;
            color: #fff;
            font-size: 17px;
            /* border-radius: 0 10px 10px 0; */
        }

        form {
            position: relative;
            top: 72px;
        }

    </style>
    <script src="dh.js"></script>
</head>

<body>
    <header>
        <div class="head">
            <nav class="head-top">
                <ul class="fr">
                    <li><a href="http://baidu.com">你好，请登录</a></li>
                    <li><a href="#">免费注册</a></li>
                    <li> <a href="#">我的订单</a></li>
                    <li> <a href="#">我的京东</a></li>
                    <li><a href="#">京东会员</a></li>
                    <li> <a href="#">企业采购</a></li>
                    <li> <a href="#">客户服务</a></li>
                    <li><a href="#">网站导航</a></li>
                    <li><a href="#">手机京东</a></li>
                </ul>
            </nav>
        </div>
        <main>
            <div>
                <img src="a.png" alt="百度LOGO">
            </div>
            <form>
                <input type="text"><input type="submit" value="百度一下">
            </form>
            </main>
        <div class="head foot">
            <nav class="tx w">
                <ul>
                    <span class="red"></span>
                    <li class="active" style="width: 60px;"><a href="#">首页</a></li>
                    <li class="lei1" style="width: 60px;"><a href="#">国内</a></li>
                    <li class="lei1" style="width: 60px;"> <a href="#">国际</a></li>
                    <li class="lei1" style="width: 60px;"> <a href="#">军事</a></li>
                    <li class="lei1" style="width: 60px;"><a href="#">财经</a></li>
                    <li class="lei1" style="width: 60px;"> <a href="#">娱乐</a></li>
                    <li class="lei1" style="width: 60px;"> <a href="#">体育</a></li>
                    <li style="width: 85px;"><a href="#">互联网</a></li>
                    <li class="lei1" style="width: 60px;"><a href="#">科技</a></li>
                    <li class="lei1" style="width: 60px;"><a href="#">游戏</a></li>
                    <li class="lei1" style="width: 60px;"><a href="#">女人</a></li>
                    <li class="lei1" style="width: 60px;"><a href="#">汽车</a></li>
                    <li class="lei1" style="width: 60px;"><a href="#">房产</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="cbl right-l">
       
        <div style="height: 100px;" class="chy"></div>
        <div style="height: 100px;" class="chy"></div>
        <div class="chy"></div>
        <div class="chy"></div>
        <div class="chy"></div>
        <div class="chy"></div>
        <div class="fd"></div>
        
       
    </div>
    <script>
        var foot = document.querySelector('.foot');
        var cbl = document.querySelector('.right-l');
        window.onscroll = function(){
            if(200 <= document.documentElement.scrollTop){
                foot.style.position = 'fixed';
                foot.style.margin = '0';
            }else{
                foot.style.position = '';
                foot.style.marginTop = '100px';
            }
            if (document.documentElement.scrollTop >= 200) {
          cbl.style.transform = 'translateY(0)';
         } else {
            cbl.style.transform = 'translateY(48px)';
        }
        }
        window.addEventListener('load',function(){
    //1.获取元素
    var cloud = document.querySelector('.red');
    var c_nav  =document.querySelector('.foot');
    var lis = document.querySelectorAll('.tx li');
    //2.给所有的li绑定事件
    //这个current 作为筋斗云的起始位置
    var current = 0;
    var lastIndex = 0;
    for(var i = 0; i < lis.length;i++){
        lis[i].index = i;
        
        //（1）鼠标经过把当前的小li 的位置作为目标值
        lis[i].addEventListener('mouseenter',function(){
            console.log(lis[this.index].style.width);
            cloud.style.width = lis[this.index].style.width;
            animate(cloud,this.offsetLeft);
        });
        //（2）鼠标离开就回到起始的位置
        lis[i].addEventListener('mouseleave',function(){
            animate(cloud,current);
            cloud.style.width = lis[lastIndex].Width + 'px';
        });
        //（3）当我们鼠标单击，就把当前位置作为目标
        lis[i].addEventListener('click',function(){
            current = this.offsetLeft;
        });
        lis[i].onclick = function(){
    lis[lastIndex].classList.remove('active');
    this.classList.add('active');
    // 只有点击的时候才能记录索引值
    lastIndex = this.index;
  }
    }
})
   var fd = document.querySelector('.fd');
      fd.onclick = function(){
        document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
      }
     
    </script>
</body>
</html>